import React, { useEffect } from "react";
// 他们是react-redux提供的hooks，为了方便获取仓库的值和调用仓库的函数
import { useSelector, useDispatch } from "react-redux";

const Index = () => {
  // 将仓库的count，变成组件的count变量，并且具有响应式
  const count = useSelector((state) => state.city.count);
  // dispatch就是用来改变变量的方法
  const dispatch = useDispatch();

  const list = useSelector((state) => state.city.movieList);

  useEffect(() => {
    dispatch({ type: "loadData" });
  }, [dispatch]);

  return (
    <>
      <div>这是城市选择页</div>
      <button onClick={() => dispatch({ type: "minus" })}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: "add" })}>+</button>

      <p>{list.length}</p>
    </>
  );
};

export default Index;
